<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { showConfirmDialog } from 'vant';

import reqApis from '../../../req/reqApis.js';

const emit = defineEmits(['refresh']);


const router = useRouter();

const props = defineProps({
  order: {
      type: Object
    }
});

const currentData = ref<any>({
  statuArr: ["已签收","派送中","已取消"]
});

const toRouter = (str:any) => {
  router.push({path:str, query: {orderId: props.order.orderId}});
}

const displayStatus = (index:any, max:any) => {
  if(index < max) {
    return 'block'
  }
  return 'none';
}
const hiddenFn = (len:any)  =>{
  if(len>3) {
    return 'block'
  }
  return 'none';
}
const deleteOrderFn = (order:any) => {
  showConfirmDialog({
      title: '提示',
      message:'确定删除订单吗？',
    })
      .then(() => {
        reqApis.deleteOrderByIdApi({orderId:order.orderId}).then((res:any) => {
          emit("refresh");
        });
      })
      .catch(() => {
      });
}


</script>

<template>
  <section class="orderItemUtil" @click="toRouter('/orderDetail')" v-if="props.order">
    <div class="title">
      <div class="shop"><i class="shop-icon"></i>{{props.order.shopName}}</div>
      <div class="status" @click.stop="deleteOrderFn(props.order)">{{currentData.statuArr[props.order.orderStatus]}}</div>
    </div>
    <div class="content">
      <div class="type2" v-if="props.order.orderDetailList.length==1">
        <div class="img-icon" :style="{background: `#ccc url(${props.order.orderDetailList[0].productIcon}) center no-repeat`}"></div>
        <div class="text"> {{props.order.orderDetailList[0].productName}}</div>
      </div>
      <div class="type1" v-else>
        <div class="img-icon" v-for="(item, index) in props.order.orderDetailList"  :key="index" :style="{background: `#ccc url(${item.productIcon}) center no-repeat`, display: displayStatus(index, 3)}"></div>
        <div class="more"  :style="{display: hiddenFn(props.order.orderDetailList, 3)}">
          <span >查看更多</span>
          <span class="more-icon"></span>
        </div>
      </div>
      
      <div class="count">
        <div class="count-l">共{{props.order.orderDetailList.length}}件商品</div>
        <div class="count-r">实付金额：<span>￥{{props.order.orderAmount}}</span></div>
      </div>
    </div>
    <div class="btn-wrap">
      <div class="btn">看相识</div>
      <div class="btn red">再次购买</div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.orderItemUtil {
  width: 3.45rem;
  // height: 1.88rem;
  margin: 0 .15rem .15rem;
  border-radius: .1rem;
  background: white;
  padding: .1rem;
  box-sizing: border-box;
  .title {
    height: .25rem;
    display: flex;
    font-size: .16rem;
    align-items: center;
    color: #333;
    .shop {
      display: flex;
      align-items: center;
      flex: 1;
      .shop-icon {
        width: .16rem;
        height: .16rem;
        background: url("../../../assets/images/shop-icon-3.png") no-repeat center;
        background-size: contain;
        margin-right: .05rem;
      }
    }
    .status {
      width: .75rem;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #999;
      position: relative;
      &::after {
        width: .15rem;
        height: .15rem;
        content: "";
        background: url("../../../assets/images/clear-icon-2.png") no-repeat center;
        background-size: contain;
        position: absolute;
        top: 50%;
        margin-top: -.07rem;
        right: 0;
      }
      &::before {
        width: 0;
        height: .15rem;
        content: "";
        border-right: .01rem solid #e5e5e5;
        position: absolute;
        top: 50%;
        margin-top: -.07rem;
        right: .25rem;
      }
    }
    
  }
  .content {
    padding-top: .08rem;
    .type2 {
      display: flex;
      align-items: center;
      .img-icon {
        width: .75rem;
        height: .75rem;
        background-size: cover!important;
        margin-right: .1rem;
      }
      .text {
        flex: 1;
        font-size: 14px;
        color: #333;
        line-height: 21px;
        overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box; 
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
      }
    }
    .type1 {
      display: flex;
      .img-icon {
        width: .75rem;
        height: .75rem;
        background-size: cover!important;
        margin-right: .1rem;
      }
      .more {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #333;
        .more-icon {
          width: .12rem;
          height:.12rem;
          background: #d8d8d8;
          border-radius: .06rem;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            display: inline-block;
            top: 50%;
            margin-top: -3px;
            right: 3px;
            width: 4px;
            height: 4px;
            border-top: 2px solid #fff;
            border-left: 2px solid #fff;
            background: 0 0;
            transform: rotate(135deg);
          }
        }
      }
    }
    .count {
      width: 3.25rem;
      height: .32rem;
      position: relative;
      display: flex;
      align-items: center;
      &::after {
        width: 3.25rem;
        height: 0;
        content: "";
        position: absolute;
        border-bottom: .01rem solid #e5e5e5;
        bottom: 0;
        left: 0;
      }
      .count-l {
        width: 1.6rem;
        font-size: 12px;
        color: #999;
        padding-right: .1rem;
        text-align: right;
      }
      .count-r {
        flex: 1;
        font-size: 14px;
        color: #999;
        span {
          color: #151515;
        }
      }
    }
  }
  .btn-wrap {
    display: flex;
    padding-top: .1rem;
    justify-content: flex-end;
    .btn {
      text-align: center;
      width: .86rem;
      height: .3rem;
      line-height: .3rem;
      border-radius: .04rem;
      margin-left: .08rem;
      font-size: .14rem;
      color: #333;
      border: 1px solid #ccc;
      &.red {
        background: #e93b3d;
        border: 1px solid #e93b3d;
        color: white;
      }
    }
  }
}
</style>
